<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">-->
  <title>mtdp_interview_zbh</title>

  <!--根据不同的设备计算出DP，从而设置不同的跟元素的font-size。实现rem自适应布局-->
  <!--rem只适用于固定尺寸，像底部导航元素平分屏幕宽，大尺寸元素必须使用百分比或者flex去做-->
  <script>
    !function (e) {
      function t(a) {
        if (i[a])return i[a].exports;
        var n = i[a] = {exports: {}, id: a, loaded: !1};
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
      }

      var i = {};
      return t.m = e, t.c = i, t.p = "", t(0)
    }([function (e, t) {
      "use strict";
      Object.defineProperty(t, "__esModule", {value: !0});
      var i = window;
      t["default"] = i.flex = function (e, t) {
        var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent,
          d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i),
          c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
          s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s, m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
      }, e.exports = t["default"]
    }]);
    flex(100, 1);
  </script>
  <style>
    * {
      box-sizing: border-box;
      font-family: "Arial","PingFang SC",'Microsoft Yahei', sans-serif;
    }
    html, body {
      width: 100%;
      margin: 0;
      padding: 0;
      /*font-size: 10px;*/
      box-sizing: border-box;
    }

    ul, li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #333;
    }
    hr{
      /*宽度超过设计稿的50%最好用百分比，不要用rem*/
      /*因为我设置了box-sizing：border-box，因此此处的width的百分比是依据父元素的content的宽度来计算的，而不是css中直接设置的*/
      /*width: 104.347%;*/
      width: 104%;
      border-top:0.02rem solid #E1E1E1;
      border-right:0;
      border-bottom: 0;
      border-left: 0;
      margin:0.3rem 0;
    }
    .clear-float:after {
      display: block;
      clear: both;
      content: '';
    }

  </style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
